﻿<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>视频点播测试</title>
    <link rel="stylesheet" href="./css/layui.css">
    <link rel="stylesheet" href="./css/rtmp.css">
    <link rel="stylesheet" href="./css/video-js.css">
</head>

<body>
	<div class="wrapper">
        <h1 class="wrapper-title">视频点播测试</h1>
        <form class="layui-form layui-form-pane">
			<div class="layui-form-item">
                <label class="layui-form-label">点播地址</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入点播地址" class="layui-input" id="vod-url" value="">
                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">点播秘钥</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入点播秘钥" class="layui-input" id="vod-token" value="">
                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">起始时间</label>
                <div class="layui-input-inline rtmp-token-wrapper">
                    <input type="text" class="layui-input" id="vod-start" placeholder="请输入起始时间" value="0">
                </div>
                <div class="layui-input-inline">
                    <input type="button" class="layui-btn" value="开始点播" id="vod-btn">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频播放器</label>
                <div class="layui-input-inline" style="width:100%">
					<!-- controls隐藏控制栏 -->
                    <video id="videoElement" width="100%" controls></video>
                </div>
            </div>
        </form>
        <script type="text/javascript" src="./js/flv.min.js"></script>
        <script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
			var hostname = location.hostname;
			var prefix = "http://" + hostname + ":9010/";
			document.getElementById("vod-url").value = prefix;
			document.getElementById("vod-btn").onclick = function(){
				// 点播秘钥
				var token = document.getElementById("vod-token").value;
				// 点播地址
				var url = document.getElementById("vod-url").value + token + ".flv";
				if (flvjs.isSupported()) {
                    var videoElement = document.getElementById('videoElement');
                    var flvPlayer = flvjs.createPlayer({
                        "type": "flv",
                        "url": url,
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
					flvPlayer.play().then(function(){
					    var startTime = parseInt(document.getElementById("vod-start").value);
						if(startTime < 1){
							startTime = 1;
							document.getElementById("vod-start").value = startTime;
						}
						setTimeout(function(){
							// 设置起始播放位置
							flvPlayer.currentTime = startTime;
						},50);
					});
                }
			};
        </script>
    </div>
</body>

</html>